<template>
  <div class="help">
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item title="如何成为盐选会员？" name="1">
        <div>
          盐选会员，是知乎于 2019 年 3 月 21
          日上线的全新会员服务体系，包含付费内容、社区功能和会员身份三大权益。通过盐选会员体系，知乎为用户提供超过
          5.7 万个知识服务产品，包括 2000多场盐选专栏，近 1 万场知乎 Live，3.4
          万本优质电子书和讲书，以及共计约 1.1
          万本国内外一线杂志。盐选会员的推出，标志着知乎在广告投放之外的商业模式从单一的知识付费向更多元化的会员经济迈进。
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="如何进行收入（赞赏、付费咨询等）余额提现？"
        name="2"
      >
        <div>
          目前 iOS 客户端暂不支持在 App
          内进行微信提现。如需提现，还请在网页端登录 - 点击首页右侧「我的余额」
          -「提现」，或直接访问：我的余额 完成提现。 Android
          用户绑定实名认证的微信帐号后，可在 App 内完成提现，路径如下：App
          「我的」-「余额礼券」-「余额」，每日提现 5 次，每日提现额度 ： 1 元 ≤
          提现额度 ≤ 10000 元 。
        </div>
      </el-collapse-item>
      <el-collapse-item title="如何申请注销帐号？" name="3">
        <div>
          知乎个人帐号可以申请注销。 个人帐号使用者本人可登录知乎 APP
          端，进入「我的」-「反馈与帮助」-「自助服务」-「帐号注销」，根据提示申请注销。
          为了避免被盗号或非本人操作所带来的损失，注销帐号需要确认帐号所属，并请在您申请注销您的帐号之前，充分阅读、理解注销帐号注意事项。
          详细注销步骤请查看：注销帐号说明
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="遇到 bug 或使用故障，应如何排查和快速反馈？"
        name="4"
      >
        <div>如在使用中遇到故障，排查步骤如下：</div>
        <div>
          1.检查客户端是否为最新版本：应用商店更新最新版本客户端，可解决版本较低带来的使用故障，下载更新：https://www.zhihu.com/app/
          。
        </div>
        <div>
          2.排查当前网络状况是否良好：运行其他应用是否也存在类似故障，建议退出客户端清除进程，重新登录。
        </div>
        <div>3.仍然出错，通过「摇一摇」或私信「知乎小管家」提供以下信息：</div>
        <div>（1）出错时页面截图</div>
        <div>（2）详细说明你遇到的问题或者出错时的操作步骤</div>
        <div>
          （闪退后再次打开客户端，摇一摇仍然可以提供有效信息，出现闪退问题后，也仍然可以通过该方法反馈故障。）
        </div>
        <div>
          「摇一摇」快速反馈方式：「我的」-右上角「设置」-打开「摇一摇，截屏反馈
          bug」，遇到疑似 bug 问题，摇一摇手机，弹出反馈界面，根据提示反馈即可。
        </div>
        <div>您的反馈将会直接传给工程师，进一步排查修复。</div>
      </el-collapse-item>
      <el-collapse-item title="什么是知乎机构号？如何开通？" name="5">
        <div>
          「知乎机构帐号」是机构用户专用的知乎帐号，与知乎社区内原有的个人帐号独立并行，其使用者为有正规资质的组织机构，包括但不限于科研院所、公益组织、政府机关、媒体、企业等。
          机构号和个人号是独立的两套体系，相应地，问答和粉丝也无法迁移，所以无法直接将个人号转成机构号，或者帐号合并，而是需要重新申请机构号。
          机构帐号申请地址：https://www.zhihu.com/org/signup
          ，请于电脑端完成注册操作 。提交申请后，工作人员将在 10
          个工作日内对申请结果进行反馈。
        </div>
      </el-collapse-item>
      <el-collapse-item title="知乎使用指南" name="6">
        <div>欢迎来到知乎，一个中文互联网综合性知识内容平台</div>
        <div>以「让每个人高效获得可信赖的解答」为品牌使命和北极星。</div>
        <div>
          在这里，无论是满足好奇，或者解答疑惑，你都有机会找到可信赖的解答。
        </div>
        <div>
          关于「知乎怎么玩」也许你有很多好奇，不如就先从这里了解，开启你的知乎之旅吧
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="button">
      <el-button type="success" @click="open1" plain>已解决</el-button>
      <el-button type="danger" @click="open2" plain>未解决</el-button>
      <el-button
        type="info"
        plain
        icon="el-icon-edit"
        @click="dialogFormVisible = true"
        >意见反馈</el-button
      >
      <el-dialog title="意见反馈" v-model="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="为我们评分" :label-width="formLabelWidth">
            <el-rate v-model="value"></el-rate>
          </el-form-item>
          <el-form-item label="意见或建议" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="textarea"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >提 交</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  data() {
    return {
      value: "",
      textarea: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "100px",
    };
  },
  setup() {
    return {
      open1() {
        ElMessage.success({
          message: "已收到您的反馈",
          type: "success",
        });
      },
      open2() {
        ElMessage.error("已收到您的反馈");
      },
    };
  },
});
</script>

<style lang="less" scoped>
.help {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.el-collapse {
  margin-top: 10px;
  width: 80%;
  .el-collapse-item {
    border: 2px rgb(121, 125, 134) solid;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .el-collapse-item__content {
    font-size: 15px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .el-collapse-item__header {
    font-size: 20px;
    padding-left: 5px;
    color: rgb(255, 0, 106)!important;
  }
  .button {
    display: flex;
  }
}
</style>